<template>
  <div class="block">
    <Title
      minTitle="子账号"
      title="子账号列表"
      introduce="展示当前组织下的所有子账号，可修改子账号信息或删除子账号。"
    />
    <el-table
      :data="userList"
      border
      style="width: 100%"
      class="teble"
      :model="query"
    >
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column
        prop="username"
        width="80"
        label="用户名称"
      ></el-table-column>
      <el-table-column prop="type" width="100" label="类型">
        <template slot-scope="scope">
          {{ scope.row.type | userLabel }}
        </template>
      </el-table-column>
      <el-table-column prop="cTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.cTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="uTime" label="更新时间">
        <template slot-scope="scope">
          {{ scope.row.uTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="描述"></el-table-column>
      <el-table-column label="操作" class="caozuo">
        <i class="iconfont icon-bianji"></i>
        <i class="iconfont icon-Delete"></i>
      </el-table-column>
    </el-table>
    <div class="pagination-block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import { $userList } from "@/api/index.js";

export default {
  name: "userslist",
  components: {
    Title,
  },
  data() {
    return {
      userList: [],
      query: {
        currPage: 1,
        pageSize: 5,
      },
      total: 5,
      date: [], // 插件选择的时间
    };
  },
  filters: {
    userLabel(value) {
      return value == 1 ? "超级观察员" : value == 2 ? "观察员" : "管理员";
    },
    formatDate(date) {
      const d = new Date(+date);
      const month = d.getMonth() + 1; //月份
      const day = d.getDate(); //日
      const hour = d.getHours(); //小时
      const minutes = d.getMinutes(); //分
      const seconds = d.getSeconds(); //秒
      return `${d.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
    },
  },
  watch: {
    date(val) {
      if (val) {
        const d1 = val[0];
        const d2 = val[1];
        const time1 = d1 && d1.getTime();
        const time2 = d2 && d2.getTime();
        if (time1 && time2) {
          this.query.date = time1 + "-" + time2;
        } else {
          this.query.date = "";
        }
      } else {
        this.query.date = "";
      }
    },
  },
  created() {
    this.getUsageList();
  },
  methods: {
    getUsageList() {
      $userList(this.query).then((res) => {
        this.userList = res.data.data;
        this.total = 8;
      });
    },
    handleSizeChange(num) {
      this.query.pageSize = num;
      this.query.currPage = 1;
      this.getUsageList();
    },
    handleCurrentChange(num) {
      this.query.currPage = num;
      this.getUsageList();
    },
  },
  // methods: {
  //   typeFlag(userList) {
  //     let type = userList.type;
  //     console.log(type);
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.pagination-block {
  padding: 20px 0;
  background-color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
  .el-pagination {
    display: inline-block;
  }
}

.block /deep/ th div,
/deep/ td div {
  text-align: center;
}

.icon-bianji,
.icon-Delete {
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.icon-bianji {
  background-color: #409eff;
}

.icon-Delete {
  background-color: #f56c6c;
}
</style>
